<template>
  <div class="params-info" v-if="Object.keys(paramsInfo).length !==0">
    <table class="info-size" v-for="(table,index) in paramsInfo.sizes" :key="index">
      <tr v-for="(tr,indexTr) in table" :key="indexTr">
        <td v-for="(td,indexTd) in tr" :key="indexTd">{{td}}</td>
      </tr>
    </table>
    <table class="info-params">
      <tr v-for="(tr,index) in paramsInfo.infos" :key="index">
        <td class="param-key">{{tr.key}}</td>
        <td class="param-value">{{tr.value}}</td>
      </tr>
    </table>
    <div class="info-img" v-if="paramsInfo.image.length !==0">
      <img :src="paramsInfo.image" alt="">
    </div>
  </div>
</template>

<script scoped>
export default {
   name: 'DetailParamsInfo',
   data() {
       return {}
   },
   props: {
     paramsInfo: {
       type: Object,
       default: {}
     }
   }
}
</script>

<style lang='less' scoped>
  .params-info {
    padding: .4rem .3rem;
    border-bottom: .1rem solid #f2f5f8;
    table {
      width: 100%;
      tr {
        height: .84rem;
      }
      td {
        border-bottom: .02rem solid rgba(100,100,100,.1);
      }
      &.info-size tr td:nth-child(1) {
        width: 1.6rem;
      }
      &.info-params {
        border-top: .02rem solid rgba(0,0,0,.1);
        .param-key {
          width: 1.6rem;
        }
      }
    }
    .info-img img{
      width: 100%;
    }

  }
</style>
